<!-- 中国地图  -->
<template>
  <div id="china-map-chart-main">
    <div ref="chinaMapChartContainer" class="china-map-chart-container"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import mapData from './json/china.json';
export default {
  components:{mapData},
  name:"ChinaMapChart",
  data(){
    return{
      mapDom: null,
    }
  },
  methods:{
    radomValue(){
      return Math.round(Math.random()*100);

    },
    setMap() {

      echarts.registerMap("china", mapData);

      let dataValue=[];
      //中国加南海诸岛
      dataValue.push({name:this.$t("province_nan_hei"),value:this.radomValue()})

      if (!!mapData && !!mapData.features && mapData.features.length > 0){
        //针对中国地图的省名多语设置
        mapData.features.forEach(item=>{
          item.properties.name = this.$t("province_"+item.id);
          //加入各省的数据值
          dataValue.push({name:this.$t("province_"+item.id),value:this.radomValue()})
        })

      }


      //this.mapDom = echarts.init(document.getElementById("chinaMapChartContainer"));
      this.mapDom = echarts.init(this.$refs.chinaMapChartContainer);
/*
      const dataValue=[
        {name:this.$t('province_nan_hei'),value:this.radomValue()},
        {name:this.$t('province_beijing'),value:this.radomValue()},//"北京市"
        {name:this.$t('province_tianjin'),value:this.radomValue()},//"天津市"
        {name:this.$t('province_shanghai'),value:this.radomValue()},//"上海市"
        {name:this.$t('province_chongqing'),value:this.radomValue()},//"重庆市"
        {name:this.$t('province_hebei'),value:this.radomValue()},//"河北"
        {name:this.$t('province_henan'),value:this.radomValue()},//"河南"
        {name:this.$t('province_guangdong'),value:this.radomValue()},//"广东"
        {name:this.$t('province_xinjiang'),value:this.radomValue()},//"新疆"
        {name:this.$t('province_xiznag'),value:this.radomValue()},//"西藏"
        {name:this.$t('province_neimenggu'),value:this.radomValue()},//"内蒙古"
        {name:this.$t('province_qinghei'),value:this.radomValue()},//"青海"
        {name:this.$t('province_sichuan'),value:this.radomValue()},//"四川"
        {name:this.$t('province_heilongjiang'),value:this.radomValue()},//"黑龙江"
        {name:this.$t('province_gansu'),value:this.radomValue()},//"甘肃"
        {name:this.$t('province_yunnang'),value:this.radomValue()},//"云南"
        {name:this.$t('province_guangxi'),value:this.radomValue()},//"广西"
        {name:this.$t('province_hunan'),value:this.radomValue()},//"湖南"
        {name:this.$t('province_shanxi'),value:this.radomValue()},//"陕西"
        {name:this.$t('province_jilin'),value:this.radomValue()},//"吉林"
        {name:this.$t('province_hubei'),value:this.radomValue()},//"湖北"
        {name:this.$t('province_guizhou'),value:this.radomValue()},//"贵州"
        {name:this.$t('province_shandong'),value:this.radomValue()},//"山东"
        {name:this.$t('province_jiangxi'),value:this.radomValue()},//"江西"
        {name:this.$t('province_liaoning'),value:this.radomValue()},//"辽宁"
        {name:this.$t('province_shan_xi'),value:this.radomValue()},//"山西"
        {name:this.$t('province_an_wei'),value:this.radomValue()},//"安徽"
        {name:this.$t('province_fujian'),value:this.radomValue()},//"福建"
        {name:this.$t('province_zhejiang'),value:this.radomValue()},//"浙江"
        {name:this.$t('province_jiangsu'),value:this.radomValue()},//"江苏"
        {name:this.$t('province_ningxia'),value:this.radomValue()},//"宁夏"
        {name:this.$t('province_heinan'),value:this.radomValue()},//"海南"
        {name:this.$t('province_taiwan'),value:this.radomValue()},//"台湾"
        {name:this.$t('province_xiangkang'),value:this.radomValue()},//"香港"
        {name:this.$t('province_aomen'),value:this.radomValue()},//"澳门"
      ]*/
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
        },
        //产生两张重贴的地图
        geo: {
          map: "china",
          roam: false,// 一定要关闭拖拽
          zoom: 1.23,
          //center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: false, //关闭省份名展示
              fontSize: "15",
              color: "rgba(0,0,0,0.7)"
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#0d0059",
              //borderColor: "#389dff",
              borderColor: "#053c73",
              borderWidth: 8, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#01012a"
            },
            emphasis: {
              areaColor: "#184cff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        textStyle: { color: "#fff" },
        visualMap: {
          type: "piecewise",
          min: 0,
          max: 1000,
          show: false,
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#ccc", "#00D2F4", "#008CFF", "#0041FF", "#00126E"],
          },
          pieces: [
            { min: 0, max: 0 },
            { min: 1, max: 25 },
            { min: 26, max: 50 },
            { min: 51, max: 75 },
            { min: 76, max: 101 },
          ],
        },
        series: [
          {
            name: "中国省份地图",
            type: "map",
            map: "china",
            zoom: 1.23,
            label: {
              show: true,
              textStyle: {
                fontSize: 10,
                color: "#fff",
              },
            },

            //data: this.data.data3.mapData,
            data:dataValue
          },
        ],
      };
      //console.log(">>>>>>>>>> setOption >>>>>>>>>>>>>>>");
      //console.log(">>>>>>>>>> dataValue=%o",dataValue);
      this.mapDom.setOption(option);

      //  随外层div的大小变化自适应
/*      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.map, () => {
        this.$nextTick(() => {
          this.mapDom.resize();
        });
      });*/
    },
  },
  mounted() {
    //this.start();
    this.setMap();
  }
}
</script>
<style lang="less">
#china-map-chart-main{
  width: 100%;
  height: 100%;
  //background-color: #00ff00;
  display: flex;
  justify-content: center;
  align-items: center;
}

.china-map-chart-container{
  //margin-top: 30px;
  //margin-bottom: 50px;
  width: 90%;
  height: 90%;
  //background-color: #a64bf4;
}
</style>
